<template>
	<view class="page_header_box flex-row">
		<view class="header_search flex-row">
			<image class="icon" src="/static/common/icon_search.png"></image>
			<input class="search" type="text" placeholder="请搜索关键字" confirm-type="search" />
		</view>
		<view class="msg_box" @click="goMessage()">
			<text class="tip">12</text>
			<image class="icon" src="/static/common/icon_message.png"></image>
		</view>
		<view class="msg_box" @click="scan()">
			<image class="icon" src="/static/common/icon_scan.png"></image>
		</view>
	</view>
</template>

<script>
export default{
	name:'UniPageSearch',
	methods:{
		//消息页面
		goMessage(){
			
		},
		//扫码查看设备
		scan(){
			// 调起条码扫描
			uni.scanCode({
				scanType: ['qrCode'],
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.page_header_box{
	padding: 16rpx 32rpx;
	align-items: center;
	background-color: #fff;
	box-sizing: border-box;
	.header_search{
		flex: 1;
		height: 64rpx;
		padding: 8rpx 16rpx;
		align-items: center;
		background-color: #F1F1F1;
		border-radius: 64rpx;
		box-sizing: border-box;
		.icon{
			width: 48rpx;
			height: 48rpx;
		}
		.search{
			flex: 1;
			padding-left: 8rpx;
			font-size: 28rpx;
			color: #222;
		}
	}
	.msg_box{
		margin-left: 32rpx;
		position:relative;
		width: 48rpx;
		height: 48rpx;
		.tip{
			position: absolute;
			top: 0;
			right: 0;
			width: 24rpx;
			height: 24rpx;
			text-align: center;
			line-height: 24rpx;
			font-size: 14rpx;
			color: #fff;
			background-color: #F63459;
			border-radius: 100%;
		}
		.icon{
			width: 48rpx;
			height: 48rpx;
		}
	}
}
</style>